<template>
  <div class="app-register">
    <AppHeader class="app-common__header" back title="注册第二步——发送验证码"></AppHeader>
    <van-form @submit="onSubmit">
    <van-cell-group inset>
      <van-field
        v-model="telcode"
        center
        clearable
        label="短信验证码"
        placeholder="请输入短信验证码"
        :rules="[{ required: true,message:'验证码不能为空' }]"
      >
        <template #button>
          <van-button :disabled="!!second" size="small" type="primary" @click="sendCode">发送验证码{{second>0?`(${second}s)`:''}}</van-button>
        </template>
      </van-field>
    </van-cell-group>
    <div style="margin: 16px;">
          <van-button :disabled="!canNext" round block type="primary" native-type="submit">
          下一步
          </van-button>
      </div>
    </van-form>
  </div>
</template>
<script lang="ts" setup>
import {ref,onMounted,onUnmounted,computed} from 'vue'
import {useRouter,useRoute} from 'vue-router'
import {isCheckcodeApi} from '@/api/register'
import type {ICheckcodeParmas} from '@/api/register'
const telcode=ref<string>('')
const second=ref<number>(10)
const router=useRouter()
const route=useRoute()
let timer:number|null=null
const sendCode=async ()=>{
  second.value=10
  const data=await isCheckcodeApi(route.query.tel as string)
  console.log(data)
  timer=setInterval(()=>{
    second.value--
    if(second.value===0){
      clearInterval(timer as number)
    }
  },1000)
}
const onSubmit=async()=>{
const data=await isCheckcodeApi(route.query.tel as string)
// 利用编程式导航跳转,不能是routerlink
router.push({name:'registerthree',query:{tel:route.query.tel}})
}
const canNext=computed(()=>{
    if(!telcode.value)return false
    return true
})
onMounted(() => {
  sendCode()
})
onUnmounted(() => {
  clearInterval(timer as number)
})
</script>